
<template>
  <div style="width: 1200px;margin: 60px auto">


<!--       todo 展示所有的笔记  瀑布流形式-->
<div style="margin: 100px 30px">

  <div v-for="i in categoryArr1">
    <div style="margin: 30px 0 20px;">
      <h2 style="font-size: 20px;
    color: #333;
    line-height: 20px;
    font-weight: bold;">{{i.name}}</h2>
    </div>

    <div v-for="j in categoryArr2" v-if="j.parentId===i.id">
      <div style="">
        <h3 style="font-size: 16px;
    color: #333;
    line-height: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 15px;">{{j.name}}</h3>
      </div>
      <div v-for="k in categoryArr3" v-if="k.parentId===j.id" style="display: inline;margin: 10px 20px;width: 100px;height: 30px">
        <a href="" >{{k.name}}</a>
      </div>
</div>
  </div>




</div>


  </div>
</template>

<script>

export default {
  data() {
    return {
      $:"",
      handleSelect(key, keyPath) {
        //key就是菜单项的index值 keyPath代表点击的菜单项完整路径
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      activeIndex: '1',
      activeIndex2: '1',

      categoryArr1:[],
      categoryArr2:[],
      categoryArr3:[],

    }


  },
  methods: {

    loadFirstCategoryList(){
      let url = 'http://localhost:8889/category/list/first';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.categoryArr1 = jsonResult.data;

        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadSecondCategoryList(){
      let url = 'http://localhost:8889/category/list/second';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.categoryArr2 = jsonResult.data;

        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadThirdCategoryList(){
      let url = 'http://localhost:8889/category/list/third';
      console.log('url = ' + url);

      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.categoryArr3 = jsonResult.data;

        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
  },
  mounted() {
  //todo 开发过程中暂时不加载
  //   this.handleActiveRecipeItem();
  // //  加载菜谱浏览信息的方法
  //   this.loadRecipeBrowsingList();
  //
  //   //  加载笔记浏览信息的方法
  //   this.loadNoteBrowsingList();
  //   //  加载  大家都在搜  浏览信息的方法
  //   this.loadSearchList();
  //   //  加载  热门食材  浏览信息的方法
  //   this.loadPopularFoodList();
  //
  //   //  加载  豆果达人  浏览信息的方法
  //   this.loadTalentList();
  //   //文章
  //   this.loadArticleList();
  //
  // //  大家的作品
  //   this.loadPieceList();

  //加载所有的菜谱
    this.loadFirstCategoryList();
    this.loadSecondCategoryList();
    this.loadThirdCategoryList();
  }
}

</script>

<style>
*{margin: 0;
  padding:0}
a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
  height: 30px;
  line-height: 20px;
}


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyRecipe  .title{font-size: 15px;line-height: 35px}
.dailyRecipe  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0 !important;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}

.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>


